<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
	<link rel="stylesheet" type="text/css" href="css/zzsc.css">
	<link rel="stylesheet" href="dist/basicContext.min.css">
	<link rel="stylesheet" href="dist/themes/default.min.css">
	<style>
		html {
			width: 100%;
			height: 100%;
		}

		body {
			text-align: center;
			min-height: 100%;
			font-size: 14px;
		}

		.htmleaf-content a {
			display: inline-block;
			position: absolute;
			margin: 5px;
			padding: 6px 10px;
			background: #4393e6;
			color: #fff;
			text-decoration: none;
			border-radius: 3px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		.htmleaf-content a.topleft {
			top: 0;
			left: 0;
		}

		.htmleaf-content a.topright {
			top: 0;
			right: 0;
		}

		.htmleaf-content a.bottomleft {
			bottom: 0;
			left: 0;
		}

		.htmleaf-content a.bottomright {
			bottom: 0;
			right: 0;
		}

		.htmleaf-content a.center {
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}

	</style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<div class="zzsc center">
			  <a href="index.html">default</a>
			  <a href="index2.html"  class="current">position</a>
			  <a href="index3.html">scroll</a>
			  <a href="index4.html">closeFunction</a>
			  <a href="index5.html">customPosition</a>
			  <a href="index6.html">jQuery</a>
			</div>
		</header>
		<div class="htmleaf-content">
			<a href="#" class="topleft">Click me!</a>

			<a href="#" class="topright">Click me!</a>

			<a href="#" class="bottomleft">Click me!</a>

			<a href="#" class="bottomright">Click me!</a>

			<a href="#" class="center">Click me!</a>
		</div>
	</div>
	
	<script src="dist/basicContext.min.js"></script>
	<script>

		var onClick = function(e) {

			var clicked = function() { alert('Item clicked!') }

			var items = [
				{ title: 'Add Sites', icon: 'ion-plus-round', fn: clicked },
				{ title: 'Reset Login', icon: 'ion-person', fn: clicked },
				{ title: 'Help', icon: 'ion-help-buoy', fn: clicked },
				{ title: 'Disabled', icon: 'ion-minus-circled', fn: clicked, disabled: true },
				{ title: 'Invisible', icon: 'ion-eye-disabled', fn: clicked, visible: false },
				{ },
				{ title: 'Logout', icon: 'ion-log-out', fn: clicked }
			]

			basicContext.show(items, e)

		}

		document.addEventListener('DOMContentLoaded', function() {

			document.querySelector('a.topleft').addEventListener('click', onClick)
			document.querySelector('a.topright').addEventListener('click', onClick)
			document.querySelector('a.bottomleft').addEventListener('click', onClick)
			document.querySelector('a.bottomright').addEventListener('click', onClick)

			document.querySelector('a.center').addEventListener('click', onClick)

		})

	</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>